<template>
  <div>
    <router-link to="/hero/addHero" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.heroName}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.cTime|ct}}</td>
          <td>
            <button class="btn btn-success" @click="edit(item.id)">编辑</button>
            <button class="btn btn-danger" @click="del(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getHeroList();
  },
  methods: {
    getHeroList() {
      this.$http.get("heroes").then(res => (this.list = res.data));
    },
    del(id) {
      if (confirm("确定删除吗")) {
        this.$http.delete("heroes/" + id).then(() => {
          this.getHeroList();
        });
      }
    },
    edit(id) {
      this.$router.push("/hero/editHero/" + id);
    }
  }
};
</script>

<style>
</style>